import React, { useCallback, useEffect, useState } from 'react'
import { FormItem } from '../../../components/VForm/interface'
import VForm from '../../../components/VForm'
import { Button, Cascader, DatePicker, Form, Select, message } from 'antd'
import { SumbitDriverInfo } from './service'
import Tree from 'rc-tree'
import TreeSelect from 'rc-tree-select'
import { SSQOptions } from './constant'
import { getVehicleInfoList } from '../../Statistics/VehicleStatusOverview/service'
import { use } from 'echarts'




export default function VehicleRequest() {
  const [form] = Form.useForm();
  const { RangePicker } = DatePicker;
  const filterOption = (input: string, option?: { label: string; value: string }) =>
  (option?.label ?? '').includes(input);
  const [vehicleInfo,setVehiclesInfoList] = useState([]);
  // console.log(vehicleInfo);

  const formItems: FormItem[] = [
    {
      name: 'driver_id',
      label: '驾驶员工号',
      required: true,
      rule: { len: 4, message: '长度为4位' },
      type: 'input'
    },
    {
      name: 'vehicle_id',
      label: '车牌号',
      required: true,
      type:"custom",
      rule:{pattern:new RegExp('^[京津沪渝冀豫云辽黑湘皖闽鄂赣甘⽢桂贵琼陕青藏川宁新港澳台浙苏][A-HJ-NP-Z][·][A-HJ-NP-Z0-9]{5,6}$'),message:'请输入正确的车牌号，例如浙A·XD111'},
      customNode: vehicleInfo.length>0? <Select showSearch filterOption={filterOption} options={vehicleInfo.map((item:any)=>{
        return {label:item.vehicle_id,value:item.vehicle_id}
      })}   />: <></>
    },
    {
      name: 'date',
      label: '起始时间',
      required: true,
      type:'custom',
      customNode: <RangePicker style={{width:'100%'}}/>
    },

    {
      name: 'destination',
      label: '目的地',
      required: true,
      type: 'custom',
      customNode:<Cascader options={SSQOptions}></Cascader>
    },
    {
      name: 'reason',
      label: '备注',
      required: false,
      type: 'input'
    }
  ]

  
  const handleSumbit = async () => {
    const values=form.getFieldsValue();
    const params={...values}
    // 删除date属性
    params.date=undefined;
    params.destination=params.destination.join('');
    console.log(form.getFieldsValue()['date'])
      const date=form.getFieldsValue()['date'];
      if(date){
        params.start_time=date[0].format('YYYY-MM-DD');
        params.end_time=date[1].format('YYYY-MM-DD');
      }
      
    /** 接口 */
    await SumbitDriverInfo(params).then(res=>{
      if(res.data.result==="SUCCESS"){
        message.success('提交成功');
      }
      else{
        message.error(res.data.message);
      }
    })
  }

  useEffect(() => {
    const queryList = async () => {
      await getVehicleInfoList().then(res => {
        setVehiclesInfoList(res.data.data)
      })
    }
    queryList();
  },[])
  return (
    <div className="Vform-container">
      <div className="Vform">
        <VForm formItems={formItems} form={form} />
      </div>

      <div className="sumbit-btn">
        <Button type="primary" onClick={handleSumbit}>
          提交
        </Button>
      </div>
    </div>
  )
}
